<template>
  <div class="versionView-container">
    <a-spin v-if="pageLoading" />
    <a-progress
      type="circle"
      :percent="percent"
      v-if="percent <= 100 && !pageLoading && percentShow"
    />
    <div class="BlackHole-container" ref="blackHoleContainer"></div>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import { canvasHolder } from "@/blackHoleTools/CanvasHolder";
import { releaseEngine, initialSDKModule } from "@/blackHoleTools/Engine";
import { mapGetters } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      pageLoading: false,
      defaultSource: {},
      viewData: {},
      percent: 0,
      defaultTitle: "xxxxxx建设项目管理平台",
      percentShow: false,
    };
  },
  computed: {
    ...mapGetters(["blackHoleAssetsPreFetch", "blackHoleRESystemCreated"]),
  },
  watch: {
    //系统引擎创建完成 && 公共资源加载完成
    // RESystemRenderReady: {
    //   handler(val) {
    //     if (val == true) {
    //       this.getSetModelData();
    //     }
    //   },
    //   immediate: true,
    // },

    blackHoleAssetsPreFetch: {
      handler(val) {
        this.$nextTick((_) => {
          if (val) {
            initialSDKModule();
          }
        });
      },
      immediate: true,
    },

    blackHoleRESystemCreated: {
      handler(val) {
        if (val) {
          this.$nextTick((_) => {
            this.getSetModelData();
          });
        }
      },
    },
  },
  created() {
    document.title = this.defaultTitle;
  },
  mounted() {},
  methods: {
    //查询BIM地址
    getSetModelData() {
      let { uuid } = this.$route.query;
      this.pageLoading = true;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/blackHole3D/sceneShareByShareId.api?uuid=${uuid}`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            let { sceneName, bimShare, modelData } = data ?? {};
            let { expireDate } = bimShare ?? {};
            if (moment(moment()).isSameOrBefore(expireDate)) {
              document.title = sceneName ?? this.defaultTitle;
              this.addEventListener();
              this.onEngineCreated(modelData ?? []);
            } else {
              this.$message.error("链接已经失效！");
            }
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.pageLoading = false;
          });
      });
    },

    //系统引擎创建完成回调【加载模型资源】
    onEngineCreated(dataSource = []) {
      if (dataSource.length == 0) {
        return;
      }
      let dom = this.$refs.blackHoleContainer;
      let BlackHole3D = window.BlackHole3D;
      canvasHolder.moveCanvasToTarget(this.$refs.blackHoleContainer);
      BlackHole3D.m_re_em_window_width = dom.clientWidth;
      BlackHole3D.m_re_em_window_height = dom.clientHeight;
      BlackHole3D.Coordinate.setEngineWorldCRS("EPSG:3857");
      let dataSetSources = [];
      dataSource.forEach((item) => {
        let { dataSetId, resourcesAddress } = item;
        dataSetSources.push({
          dataSetId,
          resourcesAddress,
          useTransInfo: true,
          transInfo: [
            [1, 1, 1],
            [0, 0, 0, 1],
            [0, 0, 0],
          ],
        });
      });
      //开始加载一个或多个模型资源
      BlackHole3D.Model.loadDataSet(dataSetSources);
    },

    //bim事件监听
    addEventListener() {
      //场景模型加载完成回调
      document.addEventListener("REDataSetLoadFinish", (_) => {
        //设置系统UI
        this.setSystemUI();
      });
      window.addEventListener("resize", this.onResize);

      //监听加载进度
      document.addEventListener(
        "REDataSetLoadProgress",
        this.REDataSetLoadProgress
      );
    },

    //监听Bim加载进度
    REDataSetLoadProgress(e) {
      var percent = e.detail.progress;
      this.percent = percent;
      this.percentShow = true;
      if (percent >= 100) {
        this.percentShow = false;
      }
    },

    //设置系统UI
    setSystemUI() {
      try {
        BlackHole3D.Graphics.setGeoCoordVisible(true);
        BlackHole3D.Graphics.setSysUIPanelVisible(true);
        BlackHole3D.Graphics.setSysPanelUIDockArea(0);
        BlackHole3D.Camera.resetCamLocate();
        BlackHole3D.Camera.resetCamBound();
      } catch (error) {}
    },

    //监听窗口尺寸变化
    onResize() {
      let box = this.$refs["blackHoleContainer"];
      if (box) {
        window.BlackHole3D.m_re_em_window_width = window.innerWidth;
        window.BlackHole3D.m_re_em_window_height = window.innerHeight;
      }
    },
  },
  beforeDestroy() {
    releaseEngine();
  },
};
</script>

<style lang="less" scoped>
.versionView-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #fff;
  .ant-spin-spinning,
  .ant-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .header {
    padding: 0 20px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    background-color: #2f2f2f;
    flex-shrink: 0;
  }
  .BlackHole-container {
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
